<template>
  <nav id="DappTabBar">
    <ul>
      <li v-for="(item,index) in tabBarList" :key="index">
        <router-link :to="item.path">
          <i :class="item.class"></i>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "DappTabBar",
  data() {
    return {
      tabBarList: [
        { path: "/homes", class: "icon-lujing1" },
        { path: "/transfor", class: "icon-lujing3" },
        { path: "/games", class: "icon-lujing2" },
        { path: "/shopping", class: "icon-lujing" }
      ]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '../fonts/iconfont.css'
@import '../utils/styl/mixin.styl'
#DappTabBar
  position fixed
  bottom 0
  height rem(50)
  width 100%
  background-color $tabBarBg
  ul
    display flex
    justify-content space-around
    li
        line-height rem(50)
        flex 1
        text-align center
        a
            display block
            i
                display block
                color $tabBarColor
                font-size rem(20)
</style>
